<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <div th:replace="include/bootstrap :: bootstrap"></div>
</head>
<body>
<div th:replace="include/AdminNav :: AdminNav"></div>
<div class="table-responsive" style="margin-left: 18%">
    <table class="table table-striped"  >
        <thead>
        <tr>
            <th colspan="5" style="text-align:left ;font-size: 20px"><button class="line btn btn-primary btn-sm" onclick="add()" >添加班级</button>&nbsp;&nbsp;&nbsp;</th>
        </tr>
        <tr>
            <th>编号</th>
            <th>课程名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="clist: ${list}">
            <td th:text="${clist.classid}"></td>
            <td th:text="${clist.classname}"></td>
            <td>
                <a th:onclick="'javascript:edit(\''+${clist.classid}+'\');'" style="text-decoration: none;">
                    <button class="btn btn-default" style="width: 50px;height: 30px;background: #3e8f3e">修改</button>
                </a>
                <a th:onclick="'javascript:trash(\''+${clist.classid}+'\');'" style="text-decoration: none;"
                   data-toggle="modal" data-target="#trashModal">
                    <button class="btn btn-default" style="width: 50px;height: 30px;background: red">
                        删除
                    </button>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--编辑模态框-->
<div class="modal fade" id="editch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="Label">编辑</h4>
            </div>
            <form class="form-horizontal" th:action="@{/updateClass}" method="post">
                <div class="modal-body">
                    <input name="classid" id="classid1" hidden="hidden"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="classname" class="form-control" id="classname1">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="tch_save_btn">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--删除的模态框-->
<div class="modal fade" id="trashModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模糊框头部 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                </button>
                <h4 class="modal-title">删除！</h4>
            </div>
            <!-- 模糊框主体 -->
            <div class="modal-body">
                <strong>你确定要删除吗？</strong>
                （将删除与该数据相关联的所有数据）
            </div>
            <!-- 模糊框底部 -->
            <div class="modal-footer">
                <button type="button" class="delSure btn btn-info" data-dismiss="modal">确定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<!--添加-->
<div class="modal fade" id="addch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="my" style="text-align:center">添加班级</h4>
            </div>
            <form class="form-horizontal" th:action="@{/addClass}" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级名称</label>
                        <div class="col-sm-10">
                            <input type="text" name="classname" class="form-control" id="classname">
                            <span class="help-block"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="addbut">提交</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<script>
    //删除
    function trash(classid) {
        if (!classid) {
            alert("error");
        } else {
            $(".delSure").click(function () {
                window.location.href="/deleteClass?classid="+classid;
            });
        }
    }
    // 编辑信息的方法
    function edit(classid) {
        if (!classid) {
            alert("error");
        } else {
            // 先去查询数据
            $.ajax({
                url: '/findClassByClassid',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({
                    classid: classid
                }),
                success: function (data) {
                    $("#classid1").val(data.classid);
                    $("#classname1").val(data.classname)
                    $("#editch").modal('show');
                },
                error: function () {
                    alert("错误");
                }
            });
        }
    }
    //添加
    function add() {
        $("#addch").modal({
            backdrop: "static"
        });
    }
</script>
</body>
</html>